<template>
<!-- 翻页书 -->
  <div class="contain">
      <div class="book">
          <div class="image" >
              <img :src="imgone" alt="">
          </div>
          <div class="text">
              <p>{{text}}</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'Book',
    props:{
        imgone:{
            type:String,
            default:'',
            require:false,
        },
        text:{
            type:String,
            default:'长风破浪会有时,直挂云帆济沧海',
            require:false,
        }
    },
    data(){
        return {
        }
    }
}
</script>

<style>
    .book{
        width: 90px;
        height: 120px;
        background: rgb(255, 255, 255);
        transform-style: preserve-3d;
        transform:  perspective(-2000px);
        transition: all 0.4s;
        box-shadow: inset 90px 0 30px rgb(0, 0, 0,0.5),0 20px 100px rgb(0, 0, 0,0.5);
        text-align: center;
        position: relative;
    }
    .book:hover{
        transform: rotateZ(-20deg);
        box-shadow: inset 5px 0 30px  rgb(0, 0, 0,0.5),0 5px 100px  rgb(0, 0, 0,0.5);
    }
    /* 右边黑边 */
    .book:after{
        content: '';
        position: absolute;
        top: 0;
        right: -2px;
        width: 2px;
        height: 100%;
        border-radius: 0 2px 0 0;
        background: rgb(161, 161, 161);
        transform-origin: left;
        transform: skewY(-45deg);
    }
    .book .image{
       width: 100%;
       height: 100%;
       /* background: rgb(175, 9, 9); */
       position: absolute;
       top: 0;
       left: 0;
       transform-origin: left;
       transition: all .5s;
       color:black
    }
    .book .image img{
       width: 100%;
       height: 100%;
    }
    .book:hover .image{
       transform:rotateY(-140deg);
    }
    .book .text{
       padding: 10px;
    }
</style>
